widgets 小元件（模式）

小元件應該展示使用者經常返回應用獲取的最有用的資訊。例如，日曆小元件顯示當天的日期和下一個會議或事件，這種設計不僅直觀還便於使用者檢視重要資訊。

另外，可以根據使用者的行為和使用習慣動態調整內容，Smart Stacks可以根據使用者的行為自動旋轉，顯示最相關的小元件。

例如，當我醒來時，我喜歡知道當天的天氣情況。當我上班途中時，我總是播放一些我最近喜歡的音樂。下午晚些時候，我經常檢視交通情況以及回家的時間。晚上，我喜歡看看當天的一些重要新聞故事。

設計原則

1 個性化：讓應用程式或某種體驗與使用者建立更深的情感連線。

2 資訊性：提供了一種很好的方式，可以在使用者裝置上看到來自各種來源的資訊概覽。

3 情景性（上下文關聯）：在恰當的時刻展示正確的資訊，提供更好的體驗，最佳情況下會讓人感覺像是魔法般地預測了他們的需求和下一步。

日曆小元件，就像應用程式圖示一樣，它顯示了星期幾和當前日期，以及下一個會議或事件是應用程式中最重要的資訊。可以一眼看到的細節，比如開始時間和事件地點，可以讓人們節省開啟應用程式查詢此資訊的步驟。

如果你的日程安排很忙，有很多事件，它會摺疊一些不太相關的資訊，優先顯示每個事件中最重要的一條資訊。

當你的一天快結束時，沒有更多事件時，與其顯示一個空白的小元件，會告訴你接下來會發生什麼以及明天的日程安排。

它會在特殊節假日給你一個很好的提醒。

最令人愉悅的體驗是展示最佳照片而不僅是最新的照片。除了照片回憶外，我們還展示精選照片。另一種利用上下文的方式是展示過去幾年中當天的照片回憶

展示城市名稱、當前溫度（包括最高溫度和最低溫度）以及你當前位置當天剩餘時間的天氣預報。展示獨特的天氣事件，如大風、雷暴以及是否和何時會開始下雨。

根據上下文增加下一小時預報的解析度。這樣你可以看到每分鐘的詳細資訊，比如什麼時候可能會有雨停的間隙或者什麼時候雨會停止

地理定位和檢視周圍環境。

但在此基礎的空間感知上進行了擴充套件。當你不在家並且開車去了某個地方時，會顯示你停車的位置。

如果你有計劃好的活動，會顯示到達那裡的時間，並根據上下文調整地圖，以便你看到將要走的路線和沿途的情況。

當你不在家時，會顯示回家的預計到達時間。

小元件互動：

A 三種點選樣式

1 每個小型小元件都使用填充樣式，因為它只支援一個點選目標。

2 單元格樣式最適合在選擇小元件中的一個內容時使用，該內容獨立存在於其自己的形狀中。

3 內容樣式適合選擇在小元件中未被包圍的內容時使用。

B 便於編輯和靈活調整： 支援使用者自定義：iOS 14允許使用者透過拖放來編輯小元件，這提高了小元件的靈活性。例如，天氣小元件允許使用者更改顯示天氣的地點，使用者可以新增多個小元件並分別設定不同的顯示資訊。

點選位置欄位，會看到天氣城市列表，還可以搜尋其他位置。把這個小元件的顯示位置改為東京，當小元件翻轉回來時就顯示東京的天氣情況和資訊。

元件型別

A 適應多種尺寸：小、中、大。設計時要考慮不同尺寸展示的資訊量。例如，小尺寸的小元件應展示最核心的內容，而中、大尺寸的小元件可以展示更多詳細資訊。

小型日曆小元件，由於小元件總是顯示接下來的事件，應用程式的“日檢視”中的最新事件是最合理的。當點選小元件時，日檢視會滾動到最新事件，很好地看到當天剩餘的安排。

小型新聞小元件，點選會直接進入那個新聞故事和應用程式。

中型和大型小元件，支援多個點選目標。就像在這個新聞示例中一樣。點選任意一篇文章都會直接帶你進入點選的新聞故事。

資訊佈局

A 小型、中型和大型尺寸的佈局模式。這些佈局包括單項和密集多項摘要佈局的混合。

B 佈局模式的兩種組合

第一種 跨越所有三種尺寸的佈局，比如天氣應用，我們在每種尺寸中新增了額外的資訊。

第二種 完全在各尺寸中獨特的佈局，比如新聞應用。小型小元件優先展示豐富的內容，填滿整個空間，而中型小元件則側重於展示更多的新聞故事。

C 提供多種小元件選項：考慮提供多種小元件，以滿足使用者不同的資訊需求。例如，股票應用可以提供一個緊湊的股票觀察列表小元件，也可以提供單個股票的詳細資訊小元件。

視覺風格

A 透過應用程式的外觀來尋找個性：

天氣應用，使用了熟悉的天氣狀況背景以及應用程式中的圖示。

新聞應用，展示豐富故事圖片。

日曆應用，其簡潔的外觀和熟悉的紅色色調，重點關注即將發生的事件。

B 從應用圖示中獲得靈感：

筆記應用，採用了圖示的記事本插畫風格。

播客應用，使用了圖示的紫色漸變。

提示應用，使用了圖示的黃色漸變。

C 明亮和暗黑模式。

日曆應用，整個小元件在明亮和暗黑外觀之間切換，就像應用程式一樣。

播客應用，由於整個背景是漸變的，因此在兩種模式下都能很好地工作。

筆記應用，混合了大膽的顏色和白色，採用筆記內容的暗黑外觀模式，以反映筆記在應用程式中的外觀。

設計需要警惕的Tips

A 每種尺寸設計時，確保不要將較小的小元件放大到較大的小元件中。

對於大型螢幕使用時間小元件，可以包含更多有用的資訊並有更多空間，增加了圖表的大小，幷包括了類別和應用的詳細資訊。

B 在小型小元件中最多包含四條資訊。

C 每個小元件必須提供一個佔位符，當系統無法顯示小元件的資料時會顯示該佔位符。在這種狀態下，你應該顯示基本的圖形元素，並在佈局中顯示資訊的文字區域中進行佔位。

D 遵循所有尺寸預設的16點佈局邊距，以確保當小元件放置在其他小元件旁邊時內容感覺一致。

E 對於具有圖形形狀的佈局，如圓形和嵌入式托盤，所有尺寸使用更緊的11點邊距。靠近小元件邊緣的形狀角應該與小元件的角半徑同心。

F 放置logo：logo應該始終放在右上角。避免在空間中或小元件的其他任何地方使用文字標記。

G 避免將應用圖示放入小元件中。還要避免在小元件中放置應用名稱，因為在主螢幕上它已經出現在應用標籤下方，這樣會顯得多餘。

H 不要放置指導使用者或與他們對話的文字，如果有重要的內容需要傳達，請以圖形方式表達。

I 在小元件上顯示時間順序資訊時，不要使用“最後更新”或“最後檢查”這樣的文案。